<template>
  <!--  标题 -->
  <h1>
    <span>消息</span>
    <div class="set">
      <img src="@\assets\images\set.png" alt="设置" />
      <Tabhead />
      <!-- 缺少登录组件 -->
    </div>
  </h1>
  <!-- 导航栏 -->
  <van-tabs
    v-model:active="active"
    class="tabs"
    line-width="26px"
    line-height="3px"
    title-active-color="#333333"
    title-inactive-color="#999999"
  >
    <van-tab title="回复" title-style="font-size: 17px;">
      <!-- 空状态 -->
      <van-empty
        class="custom-image"
        :image="require('../../assets/images/nomsg.png')"
        description="暂无消息"
      />
    </van-tab>
    <van-tab title="通知" title-style="font-size: 17px;">
      <van-empty
        class="custom-image"
        :image="require('../../assets/images/nomsg.png')"
        description="暂无消息"
      />
    </van-tab>
    <van-tab title="表态" title-style="font-size: 17px;">
      <van-empty
        class="custom-image"
        :image="require('../../assets/images/nomsg.png')"
        description="暂无消息"
      />
    </van-tab>
    <van-tab title="关注" title-style="font-size: 17px;">
      <van-empty
        class="custom-image"
        :image="require('../../assets/images/nomsg.png')"
        description="暂无消息"
      />
    </van-tab>
    <van-tab title="好友" title-style="font-size: 17px;">
      <van-empty
        class="custom-image"
        :image="require('../../assets/images/nomsg.png')"
        description="暂无消息"
      />
    </van-tab>
  </van-tabs>
</template>

<script>
import { ref } from "vue";
import Tabhead from "@/components/public/Tab-head.vue";

export default {
  setup() {
    // active是选中的导航栏,值为索引。
    const active = ref(0);
    return { active };
  },
  components: {
    Tabhead,
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
h1 {
  font-size: 20px;
  height: 57px;
  padding: 0 17px 0 20px;
  .flex(space-between, center);
  .set {
    .flex();
    img {
      width: 22px;
      height: 22px;
      margin-right: 16px;
    }
  }
}
.tabs {
  width: 265px;
  height: 46px;
  padding-left: 10px;
}
.van-empty {
  position: fixed;
  left: 0;
  top: 103px;
  right: 0;
  bottom: 57px;
  justify-content: flex-start;
  padding-top: 103px;
}
</style>
